<script setup>
    // import { reactive,ref,toRef,toRefs } from 'vue'

    /**
     * reactive用法
     */
    // 普通对象不具有响应式
    // const user = {
    //     name: 'tom',
    //     age: 30
    // }

    // 创建响应式对象，是一个代理对象
    const user = reactive({
        name: 'tom',
        age: 30
    })
    // console.log(user)

    const change = () => {
        user.name = 'jerry'
        // console.log(this) // undefined 无法访问this
    }
    

    /**
     * ref用法
     */
    const count = ref(2) // {value:2}

    const modify = () => {
        count.value++
    }

    /**
     * toRef用法 
     */
    const ageRef = toRef(user,'age')

    /**
     * toRefs用法   
     */
    const userRef = toRefs(user)
    const {name,age} = userRef


</script>

<template>  
    <p>{{ user.name }}</p>
    <button @click="change">修改user.name</button>
    <hr>
    
    <p>{{ count }}</p>
    <button @click="modify">修改count</button>
    <hr>

    <p>{{ ageRef }}</p>
    <p>{{ user.age }}</p>
    <button @click="ageRef=66">修改ageRef</button>
    <button @click="user.age=77">修改user.age</button>
    <hr>

    <p>{{ name }}</p>
    <p>{{ user.name }}</p>
    <button @click="name='aa'">修改name</button>
    <button @click="user.name='bb'">修改user.name</button>

    
</template>

<style scoped>

</style>